<template>
  <div>
    <RjModal
      width="640px"
      :rules="rules"
      :visible="visible"
      :title="$t('portalAuth.privacyDisclaimer')"
      @ok="onSave"
      @cancel="onClose"
    >
      <a-spin size="large" :spinning="loading">
        <div style="overflow-y: auto">
          <a-form-model
            labelAlign="left"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            ref="desclaimerFormRef"
            :rules="rules"
            :model="desclaimerForm"
          >
            <a-form-model-item
              :label="$t('portalAuth.title')"
              style="margin-bottom: 8px"
              prop="disclaimerTitle"
            >
              <a-textarea
                v-model="desclaimerForm.disclaimerTitle"
                :placeholder="defaultRegDisclaimerTitle"
                :rows="2"
                :maxLength="200"
              />
            </a-form-model-item>

            <a-form-model-item prop="disclaimerContent">
              <span slot="label">
                {{ $t('portalAuth.content') }}
                <a-tooltip>
                  <template slot="title">
                    <div>
                      {{ $t('portalAuth.dataProtect1') }}
                      <b>{{ $t('portalAuth.dataProtect2') }}</b>
                    </div>
                  </template>
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <a-textarea
                v-model="desclaimerForm.disclaimerContent"
                :rows="7"
                :maxLength="10000"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-spin>
    </RjModal>
  </div>
</template>

<script>
import { RjModal } from '@components';
// import { requestHttp, maccApi } from '@utils/index';

export default {
  name: 'disclaimerModal',
  props: {
    defaultRegDisclaimerTitle: {
      typeof: String,
    },
    portalSubForm: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    RjModal,
  },
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      //弹窗基础参数
      visible: false,
      loading: false,
      desclaimerForm: {
        disclaimerContent: '',
        disclaimerTitle: '',
      },
      // operation: this.params.operation,
      rules: {
        disclaimerTitle: [
          {
            required: true,
            message: this.$t('common.notNull'),
            trigger: 'blur',
          },
          {
            min: 1,
            max: 200,
            message: this.$t('common.byteRange', [200]),
            trigger: 'blur',
          },
        ],
        disclaimerContent: [
          {
            required: true,
            message: this.$t('common.notNull'),
            trigger: 'blur',
          },
          {
            min: 1,
            max: 10000,
            message: this.$t('common.byteRange', [1000]),
            trigger: 'blur',
          },
        ],
      },
    };
  },

  methods: {
    /**
     * @description: 显示弹框
     * @param {*} record
     * @return {*}
     */
    show() {
      this.visible = true;
      // 这里示例已经创建，所以编辑时置空再打开需要重新赋值下。
      this.desclaimerForm = {
        disclaimerTitle: this.portalSubForm.regDisclaimerTitle,
        disclaimerContent: this.portalSubForm.regDisclaimerContent,
      };
    },

    onSave() {
      // 防止重复操作
      if (this.loading) {
        return;
      }

      const self = this;
      this.$refs.desclaimerFormRef.validate((valid) => {
        if (valid) {
          this.$emit('setDisclaimerMessage', {
            disclaimerTitle: this.desclaimerForm.disclaimerTitle,
            disclaimerContent: this.desclaimerForm.disclaimerContent,
          });
          self.visible = false;
        }
      });
    },

    //关闭弹窗
    onClose() {
      this.loading = false;
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped></style>
